<template>
  <p-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    <p-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <p-form :form="form">
        <p-row>

          <p-col :span="12">
            <p-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'billno', validatorRules.billno]" placeholder="请输入单据编号"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="需要天数" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input-number v-decorator="[ 'days', validatorRules.days]" placeholder="请输入需要天数" style="width: 100%"/>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="制单人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'mkerid', validatorRules.mkerid]" placeholder="请输入制单人"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="制单人名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'mkername', validatorRules.mkername]" placeholder="请输入制单人名称"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="制单日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'mkerdate', validatorRules.mkerdate]" placeholder="请输入制单日期"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="修改人编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'ledtid', validatorRules.ledtid]" placeholder="请输入修改人编号"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="修改人名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'ledtname', validatorRules.ledtname]" placeholder="请输入修改人名称"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="最后修改日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'ledtdate', validatorRules.ledtdate]" placeholder="请输入最后修改日期"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="客户跟踪单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <f-popup
                contextPath="codedemoapi"
                v-decorator="['sbillno', validatorRules.sbillno]"
                :trigger-change="true"
                org-fields="sbillno,sautoid,custno,custname,reason,khdj,days"
                dest-fields="billno,autoid,custno,custname,reason,khdj,days"
                code="sbillno_7756"
                @callback="popupCallback"/>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="对应客户" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'custno', validatorRules.custno]" placeholder="请输入对应客户"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="来源序号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input-number v-decorator="[ 'sautoid', validatorRules.sautoid]" placeholder="请输入来源序号" style="width: 100%"/>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="对应客户名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'custname', validatorRules.custname]" placeholder="请输入对应客户名称"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="客户简称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'shortname', validatorRules.shortname]" placeholder="请输入客户简称"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="申请原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'reason', validatorRules.reason]" placeholder="请输入申请原因"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="目前状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['khdj2', validatorRules.khdj2]" :trigger-change="true" dictCode="khdj2_9719" placeholder="请选择目前状态"/>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="客户等级" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['khdj', validatorRules.khdj]" :trigger-change="true" dictCode="khdj_1705" placeholder="请选择客户等级"/>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="顺延天数" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input-number v-decorator="[ 'sydays', validatorRules.sydays]" placeholder="请输入顺延天数" style="width: 100%"/>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="顺延原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'whysy', validatorRules.whysy]" placeholder="请输入顺延原因"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="审核人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'chkerid', validatorRules.chkerid]" placeholder="请输入审核人"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="审核人名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'chkername', validatorRules.chkername]" placeholder="请输入审核人名称"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="审核日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'chkerdate', validatorRules.chkerdate]" placeholder="请输入审核日期"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="复核人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'xchkerid', validatorRules.xchkerid]" placeholder="请输入复核人"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="复核人名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'xchkername', validatorRules.xchkername]" placeholder="请输入复核人名称"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="复核日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'xchkdate', validatorRules.xchkdate]" placeholder="请输入复核日期"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="复核状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['xchkstates', validatorRules.xchkstates]" :trigger-change="true" dictCode="xchkstates_7028" placeholder="请选择复核状态"/>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['istates', validatorRules.istates]" :trigger-change="true" dictCode="istates_2486" placeholder="请选择状态"/>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="送审状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['mysendstate', validatorRules.mysendstate]" :trigger-change="true" dictCode="mysendstate_3385" placeholder="请选择送审状态"/>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="审核情况" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input v-decorator="[ 'mychkinfo', validatorRules.mychkinfo]" placeholder="请输入审核情况"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="12">
            <p-form-item label="分支机构" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <f-popup
                contextPath="codedemoapi"
                v-decorator="['fzjgflg', validatorRules.fzjgflg]"
                :trigger-change="true"
                org-fields="fzjgflg,fzjgname"
                dest-fields="billno,fzjgname"
                code="fzjgflg_8734"
                @callback="popupCallback"/>
            </p-form-item>
          </p-col>

        </p-row>
      </p-form>

      <!-- 子表单区域 -->
      <p-tabs v-model="activeKey" @change="handleChangeTabs">
        <p-tab-pane tab="延期明细" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="baCustsylistTable.loading"
            :columns="baCustsylistTable.columns"
            :dataSource="baCustsylistTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </p-tab-pane>
        
      </p-tabs>

    </p-spin>
  </p-modal>
</template>

<script>

  import pick from 'lodash.pick'
  import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  import { validateDuplicateValue } from '@/utils/util'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"

  export default {
    name: 'BaCustsyModal',
    mixins: [JEditableTableMixin],
    components: {
      JDictSelectTag,
    },
    data() {
      return {
        labelCol: {
          span: 6
        },
        wrapperCol: {
          span: 16
        },
        labelCol2: {
          span: 3
        },
        wrapperCol2: {
          span: 20
        },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
          billno: {rules: [
            {required: true, message: '请输入单据编号!'},
          ]},
          days: {rules: [
          ]},
          mkerid: {rules: [
          ]},
          mkername: {rules: [
          ]},
          mkerdate: {rules: [
          ]},
          ledtid: {rules: [
          ]},
          ledtname: {rules: [
          ]},
          ledtdate: {rules: [
          ]},
          sbillno: {rules: [
          ]},
          custno: {rules: [
          ]},
          sautoid: {rules: [
          ]},
          custname: {rules: [
          ]},
          shortname: {rules: [
          ]},
          reason: {rules: [
          ]},
          khdj2: {rules: [
          ]},
          khdj: {rules: [
          ]},
          sydays: {rules: [
          ]},
          whysy: {rules: [
          ]},
          chkerid: {rules: [
          ]},
          chkername: {rules: [
          ]},
          chkerdate: {rules: [
          ]},
          xchkerid: {rules: [
          ]},
          xchkername: {rules: [
          ]},
          xchkdate: {rules: [
          ]},
          xchkstates: {rules: [
          ]},
          istates: {rules: [
          ]},
          mysendstate: {rules: [
          ]},
          mychkinfo: {rules: [
          ]},
          fzjgflg: {rules: [
          ]},
        },
        refKeys: ['baCustsylist', ],
        tableKeys:['baCustsylist', ],
        activeKey: 'baCustsylist',
        // 延期明细
        baCustsylistTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '单据号',
              key: 'billno',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '序号',
              key: 'autoid',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '客户编号',
              key: 'custno',
              type: FormTypes.popup,
              popupCode:"custno_4425",
              destFields:"custno,custname,khdj",
              orgFieldse:"custno,custname,khdj",
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '客户名称',
              key: 'custname',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '目前状态',
              key: 'khdj',
              type: FormTypes.select,
              dictCode:"khdj_9311",
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '需要天数',
              key: 'days',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '目前状态',
              key: 'khdj2',
              type: FormTypes.select,
              dictCode:"khdj2_2320",
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '明细状态',
              key: 'stopflg',
              type: FormTypes.select,
              dictCode:"stopFlg_4185",
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '申请原因',
              key: 'reason',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },



          ]
        },
        url: {
          add: "/codedemoapi/feixuns/baCustsy/add",
          edit: "/codedemoapi/feixuns/baCustsy/edit",
          baCustsylist: {
            list: '/codedemoapi/feixuns/baCustsy/queryBaCustsylistByMainId'
          },
        }
      }
    },
    methods: {
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        let fieldval = pick(this.model,'billno','days','mkerid','mkername','mkerdate','ledtid','ledtname','ledtdate','sbillno','custno','sautoid','custname','shortname','reason','khdj2','khdj','sydays','whysy','chkerid','chkername','chkerdate','xchkerid','xchkername','xchkdate','xchkstates','istates','mysendstate','mychkinfo','fzjgflg')
        this.$nextTick(() => {
          this.form.setFieldsValue(fieldval)
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.baCustsylist.list, params, this.baCustsylistTable)
        }
      },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)

        return {
          ...main, // 展开
          baCustsylistList: allValues.tablesValue[0].values,
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },
     popupCallback(row){
       this.form.setFieldsValue(pick(row,'billno','days','mkerid','mkername','mkerdate','ledtid','ledtname','ledtdate','sbillno','custno','sautoid','custname','shortname','reason','khdj2','khdj','sydays','whysy','chkerid','chkername','chkerdate','xchkerid','xchkername','xchkdate','xchkstates','istates','mysendstate','mychkinfo','fzjgflg'))
     },

    }
  }
</script>

<style scoped>
</style>